<div class="layui-fluid">
    <div class="layui-breadcrumb jy-breadcrumb">

    </div>
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="LAY-list-form">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">模板类型</label>
                    <div class="layui-input-block">
                        <select name="type">
                            <option value="0">请选择</option>
                            <option value="1">描述模板</option>
                            <option value="2">标题模板</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">模板名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">属性名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="field" placeholder="" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button class="layui-btn search" lay-submit lay-filter="LAY-list-search">搜索</button>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <div style="padding-bottom: 10px">
                    <button class="layui-btn create">新建模板</button>
            </div>
            <table id="LAY-list"  lay-filter="LAY-list"></table>
            <!-- 行内工具 -->
            <script type="text/html" id="LAY-list-toolbar">
                <a class="layui-btn layui-btn-normal layui-btn-xs"  lay-event="edit" >编辑</a>
                <a class="layui-btn layui-btn-normal layui-btn-xs"  lay-event="delete">删除</a>
            </script>
        </div>
    </div>
</div>
<script type="text/html" id="tp">
    <div class="layui-form pd15 tp-form" lay-filter="tp-form">
        <input type="hidden" name="id" value="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-required">模板类型</label>
                <div class="layui-input-block">
                    <select name="type" lay-verify="required" lay-filter="type">
                        <option value="">请选择</option>
                        <option value="2">标题模板</option>
                        <option value="1">描述模板</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-required">模板名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" class="layui-input" lay-verify="required">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-required">属性名称</label>
                <div class="layui-input-block">
                    <input type="text" name="field" class="layui-input" lay-verify="required">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-required">序号</label>
                <div class="layui-input-block">
                    <input type="text" name="sort" class="layui-input" value="1" lay-verify="required|int">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-required">是否必填</label>
                <div class="layui-input-block">
                    <input type="radio" name="required" value="1" title="必填" checked>
                    <input type="radio" name="required" value="2" title="非必填" >
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-required">控件类型</label>
                <div class="layui-input-block">
                    <select name="field_type" lay-verify="required" lay-filter="field_type">
                        <option value="1">文本框</option>
                        <option value="2">多选</option>
                        <option value="3">单选</option>
                        <option value="4">富文本</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item arguments" style="display: none">
            <div class="layui-inline">
                <label class="layui-form-label layui-form-label-required">属性值选项</label>
                <div class="layui-input-block ">
                    <textarea   name="arguments" class="layui-textarea" style="width: 250px"  value="" placeholder="多个用逗号隔开"></textarea>
                </div>
            </div>
        </div>

        <div class="layui-jy-center layui-item">
            <button class="layui-btn " lay-submit lay-filter="tpSubmit">保存</button>
        </div>
    </div>
</script>
<script>
    layui.use(['admin', 'table', 'form','toolJ','formSelects'], function () {
        var $ = layui.$
            , admin = layui.admin
            , view = layui.view
            , table = layui.table
            ,formSelects = layui.formSelects
            , toolJ = layui.toolJ
            , form = layui.form;
        form.render(null, 'LAY-list-form');
        table.render({
            elem: '#LAY-list'
            ,url: '/index/Template/index'
            ,cellMinWidth:80
            ,cols: [[
                {field: 'type_str', title: '模板类型'}
                ,{field: 'name', title: '模板名称'}
                ,{field: 'field', title: '属性名称'}
                ,{field: 'field_type_str', title: '控件类型'}
                ,{field: 'required_str', title: '是否必填'}
                ,{field: 'sort', title: '排序'}
                ,{field: 'operator', title: '最后操作人'}
                ,{field: 'modification_time', title: '操作时间'}
                ,{title: '操作', align:'center', fixed: 'right', toolbar: '#LAY-list-toolbar'}
            ]]
            ,page: true
            ,limit: 15
            ,text:{none: '暂无相关数据!' }
        });
        form.on('select(field_type)', function (data) {
            if (data.value == 2||data.value == 3) {
                $(".arguments").show();
            } else {
                $(".arguments").hide();
            }
        });
        form.on('select(type)', function (data) {
            if (data.value == 1) {
                $(".tp-form [name=field_type]").val(4);
                $(".arguments").hide();
                form.render(null);
            }
        });
        $('.create').on('click',function () {
            layer.open({
                type: 5,
                title: '新增模板',
                shade: [0.5, '#000'],
                offset: 'auto',
                area: ["450px", "580px"],
                shadeClose: true,
                closeBtn: 1,
                anim: 2,
                content: $('#tp').html(),
                cancel: function () {
                }
            });
            form.render(null);
        })
        //监听行内操作
        table.on('tool(LAY-list)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'edit':
                    layer.open({
                        type: 5,
                        title: '编辑模板',
                        shade: [0.5, '#000'],
                        offset: 'auto',
                        area: ["450px", "580px"],
                        shadeClose: true,
                        closeBtn: 1,
                        anim: 2,
                        content: $('#tp').html(),
                        cancel: function () {

                        }
                    });
                    toolJ.assign(data,'.tp-form');
                    $(".tp-form [name=type]").attr('disabled','disabled');
                    $(".tp-form [name=name]").addClass('gray');
                    $(".tp-form [name=name]").attr('readonly','readonly');
                    form.render(null);
                    if (data.field_type == 2||data.field_type == 3) {
                        $(".arguments").show();
                    } else {
                        $(".arguments").hide();
                    }
                    break;
                case 'delete':
                    layer.confirm('确定删除吗?', function(index){
                        layer.close(index);
                        toolJ.ajax({"data": data, 'url': '/index/Template/delete'});
                    });
                    break;
            }
        })
        //监听新建
        form.on('submit(tpSubmit)', function (data) {
            if(data.field.id){
                toolJ.ajax({"data": data.field, 'url': '/index/Template/update'});
            }else{
                toolJ.ajax({"data": data.field, 'url': '/index/Template/create'});
            }
        })
    });
</script>